<!-- 带有标签栏的组件 -->
<template>
  <div class="app-conteiner">
    <slot />
    <nut-tabbar
      v-model:visible="visibleIndex"
      unactive-color="#7d7e80"
      @tab-switch="doSwitchTab"
      active-color="#1989fa"
      :bottom="true"
    >
      <nut-tabbar-item
        v-for="item in routerList"
        :key="item.routeName"
        :tab-title="item.title"
        :icon="item.icon"
        :num="item.num"
        :to="item.to"
        :href="item.href"
        :activeImg="item.activeImg"
        :img="item.img"
        :class-prefix="item.classPrefix"
        :font-class-name="item.fontClassName"
      />
    </nut-tabbar>
  </div>
</template>

<script lang="ts" setup>
  import Taro from '@tarojs/taro';
  import { forEach } from 'lodash';
  import { TabbarRoute } from '../../types';
  import { computed, shallowRef } from 'vue';
  import { routerList } from './tabbar-router';
  import { useRouter } from '../../utils/use';
  const router = useRouter();

  const visibleIndex = shallowRef<number>(0);
  const props = defineProps({
    routeName: {
      type: String,
      default: 'Home'
    }
  });

  const instance = computed(() => {
    return Taro.getCurrentInstance();
  });

  const doSwitchTab = (_data: StringObject, index: number) => {
    const route = routerList[index];
    if (route.url !== instance.value.router?.path) {
      router.redirect(route.url);
    }
  };

  const newRouterName = props.routeName;
  forEach(routerList, (router: TabbarRoute, index) => {
    if (router.routeName === newRouterName) {
      visibleIndex.value = index;
      return false;
    }
  });
</script>
<style lang="scss">
  .app-conteiner {
    position: relative;
    height: 100%;
  }
</style>
